<div class="row">
    <div ng-Class="{ 'col-md-9': appLayout.showFlow, 'col-md-12': !appLayout.showFlow}">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">List of cases ({{$vm.list.total || 0}} of {{$vm.caseStats.count}})</h3>
                <div class="box-tools pull-right" ng-show="!appLayout.showFlow">
                    <span class="ml-xs" tooltip="Open in new window">
                        <a class="text-muted" href ng-click="layoutSrv.showFlow(true)">
                            <i class="fa fa-plus"></i> Show live stream
                        </a>
                    </span>
                </div>
            </div>
            <div class="box-body">
                <div ng-include="'views/partials/case/list/toolbar.html'"></div>

                <div class="mv-s filter-panel" ng-include="'views/partials/case/list/mini-stats.html'" ng-show="$vm.uiSrv.context.showStats"></div>

                <div class="mt-s filter-panel" ng-include="'views/partials/case/list/filters.html'" ng-show="$vm.uiSrv.context.showFilters"></div>

                <div class="row mt-s">
                    <div class="col-md-12 clearfix">
                        <div class="active-filters">
                            <ul ng-if="$vm.uiSrv.countFilters() > 0">
                                <li>{{$vm.uiSrv.countFilters()}}
                                    filter(s) applied:
                                </li>
                                <li class="filter-item" ng-repeat="(field,filter) in $vm.uiSrv.filters">
                                    <span>
                                        <strong>{{field}}:</strong>
                                        {{filter.value | filterValue}}</span>
                                    <a href="" ng-click="$vm.removeFilter(field)">
                                        <span class="filter-close fa fa-times text-danger"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="" ng-click="$vm.clearFilters()">Clear filters</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mv-s" ng-show="$vm.list.total === 0">
                        <div class="empty-message">No records</div>
                    </div>

                    <div class="col-md-12" ng-show="$vm.list.total > 0">
                        <psearch control="$vm.list"></psearch>

                        <table class="table table-striped case-list">
                            <thead>
                                <tr>
                                    <th style="width: 10px;" class="p-0"></th>
                                    <th>Title</th>
                                    <th style="width: 100px;text-align:center;">Severity</th>
                                    <th style="width: 100px;">Tasks</th>
                                    <th style="width: 100px;">Observables</th>
                                    <th style="width: 60px;">Assignee</th>
                                    <th style="width: 120px;">Date</th>
                                    <th style="width: 40px;" ng-if="appConfig.connectors.cortex.enabled">Actions</th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr ng-class="{true:'tr-warning'}[currentCase.flag]" ng-repeat="currentCase in $vm.list.values">

                                    <td class="p-0 bg-tlp-{{currentCase.tlp}} clickable" ng-click="$vm.filterByTlp(currentCase.tlp)"></td>
                                    <td>
                                        <div class="case-title wrap">
                                            <a ui-sref="app.case.details({caseId: currentCase.id})">#{{currentCase.caseId}} - {{currentCase.title}}</a>
                                        </div>
                                        <div class="case-tags flexwrap mt-xxs">
                                            <span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
                                            <strong class="text-muted mr-xxxs" ng-if="!currentCase.tags || currentCase.tags.length === 0">None</strong>
                                            <span ng-repeat="tag in currentCase.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer" ng-click="$vm.addFilterValue('tags', tag)">{{tag}}

                                            </span>
                                        </div>
                                        <div class="text-success" ng-show="currentCase.status !== 'Open'">
                                            <small>
                                                (Closed at {{currentCase.endDate | showDate}} as <strong>{{$vm.CaseResolutionStatus[currentCase.resolutionStatus]}}</strong>)
                                            </small>
                                        </div>
                                        <div class="text-danger" ng-if="currentCase.mergeFrom">
                        					          <small>
                                                Merged from <a href ui-sref="app.case.details({caseId: currentCase.mergeFrom[0]})"> Case #{{currentCase.stats.mergeFrom[0].caseId}}</a> and
                                                <a href ui-sref="app.case.details({caseId: currentCase.mergeFrom[1]})"> Case #{{currentCase.stats.mergeFrom[1].caseId}}</a>
                                            </small>
                        				        </div>
                                    </td>
                                    <td align="center">
                                        <div class="clickable" ng-click="$vm.filterBySeverity(currentCase.severity)">
                                            <severity active="false" value="currentCase.severity"></severity>
                                        </div>
                                    </td>
                                    <td>
                                        <a ui-sref="app.case.tasks({caseId: currentCase.id})">
                                            <ng-pluralize count="currentCase.stats.tasks.total" when="{'0': 'No Tasks', '1': '1 Task', 'other': '{} Tasks'}"></ng-pluralize>
                                        </a>
                                        <br>
                                        <task-progress ng-show="currentCase.stats.tasks.total > 0" tasks="currentCase.stats.tasks"/>
                                    </td>
                                    <td>
                                        <a ui-sref="app.case.observables({caseId: currentCase.id})">{{currentCase.stats.artifacts.count}}</a>
                                    </td>
                                    <td class="nowrap">
                                        <user user-id="currentCase.owner" icon-only="true" icon-size="m"></user>
                                    </td>
                                    <td>
                                        <a href ng-click="$vm.addFilterValue('startDate', currentCase.startDate)">
                                            <span uib-tooltip="{{currentCase.startDate | showDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{currentCase.startDate | shortDate}}</span>
                                        </a>
                                    </td>
                                    <td ng-if="appConfig.connectors.cortex.enabled">
                                        <span class="ml-xs" uib-dropdown>
                                            <a href class="text-primary noline nowrap" ng-click="$vm.getCaseResponders(currentCase, true)" uib-dropdown-toggle>
                                                <i class="text-primary fa fa-cog"></i>
                                            </a>
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <psearch control="$vm.list"></psearch>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div ng-show="appLayout.showFlow" class="col-md-3">
        <div class=" box">
            <div class="box-header">
                <h3 class="box-title">&nbsp;</h3>
                <div class="box-tools pull-right">
                    <span class="ml-xs" tooltip="Open in new window">
                        <a class="text-muted" href ng-click="layoutSrv.detachFlow()">
                            <i class="fa fa-external-link"></i> Open in new window
                        </a>
                    </span>

                    <span class="ml-xs" tooltip="Hide">
                        <a class="text-muted" href ng-click="layoutSrv.showFlow(false)">
                            <i class="fa fa-minus"></i> Hide
                        </a>
                    </span>
                </div>
            </div>
            <div class="box-body no-padding">
                <flow max="10"></flow>
            </div>
        </div>
    </div>

</div>
